<#assign menuId=10>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工管理列表-${Application.systemName!}</title>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="../css/font-awesome.min.css" rel="stylesheet"
	type="text/css" />
<!-- Ionicons -->
<link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- bootstrapt表单验证 -->
<link rel="stylesheet" href="../css/bootstrapValidator.min.css"/>
<link rel="stylesheet" href="../css/myself.css"/>		
		
<style type="text/css">
	.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
	    vertical-align: middle;
	    text-align: center;
	}
	/* #Left{
		text-align: left;
	}
	#Left div{ 
		padding-left: 40%; 
	} */
	#add .table tr th, #modify .table tr th{
		text-align: right; 
	}
	/* bootstrapt表单验证错误成功颜色控制样式 */
	.form-group.has-success label{
  		color: #000;
	}
	.form-group.has-error label{
  		color: #000;
	}
	
</style>
</head>
<body class="skin-blue">
	<!-- header logo: style can be found in header.less -->
	<#include "../header.html"/>
	<div class="wrapper row-offcanvas row-offcanvas-left">
		<!-- Left side column. contains the logo and sidebar -->
		<#include "../menu.html"/>

		<!-- Right side column. Contains the navbar and content of the page -->
		<aside class="right-side">
			<section class="content-header">
				<h1>员工管理列表</h1>
				<hr style="margin: 10px 0 0 0" />
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-md-12">
						<div class="box" style="padding: 20px">
							<div class="box-header center">
								<form class="navbar-form navbar-left" role="search"
									action="list?pageNo=${pageNo!}" method="get"
									style="width: 100%">
									<label>角色</label>
									<div class="form-group">
										<select name="roleId" style="padding: 7px; border: 1px solid #ccc">  
											<option value="0">请选择</option> <#list roleList as role> <#if
											roleId??> <#if roleId=role.id>
											<option value="${role.id!}" selected="selected">${role.name!}</option>
											<#else>
											<option value="${role.id!}">${role.name!}</option> </#if>
											<#else>
											<option value="${role.id!}">${role.name!}</option> </#if>
											</#list>
										</select>
									</div>
									<label>姓名</label>
									<div class="form-group">
										<input type="text" class="form-control" name="name"
											value="${name!}" placeholder="姓名" style="height: 32px">  
									</div>
									<button type="submit" class="btn btn-primary btn-sm">查询</button>
									<div class="pull-right">
										<button id="enterAdd" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">新增员工</button>
									</div>
									<!-- /.col-lg-6 -->
								</form>
							</div>
							<!-- /.box-header -->

							<div class="box-body center">
								<table class="table table-bordered">
									<tr>
										<th width="22%"><a href="#">账号</a></th>
										<th width="22%"><a href="#">姓名</a></th>
										<th width="22%"><a href="#">上级领导</a></th>
										<th width="22%"><a href="#">角色</a></th>
										<th width="12%"><a href="#">操作</a></th>
									</tr>
									<#list sysUserList as sysUser>
									<tr>
										<td id="Left"><div>${sysUser.email!}</div></td>
										<td id="Left"><div>${sysUser.name!}</div></td>
										<td id="Left"><div>${sysUser.superiorName!}</div></td>
										<td id="Left"><div><#list sysUser.roleList as role><#if role_index==sysUser.roleList?size-1>${role.name!}<#else>${role.name!}、</#if></#list></div></td>
										<td class="foundForm">
											<div>
												<a href="#" data-toggle="modal" onclick="enterModify('${sysUser.id}')" data-target="#myModal1">编辑</a> 
												<a href="javascript:deleteFactory('${sysUser.id}');">删除</a>
											</div>
										</td>
									</tr>
									</#list>
								</table>
							</div>
							<!-- /.box-body -->
							<div class="box-footer clearfix">
								<ul class="pagination pagination-sm no-margin pull-right">
									${splitPage?replace("{url}","list?")}
								</ul>
							</div>
						</div>
						<!-- /.box -->
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->


			</section>
			<!-- /.content -->
		</aside>
		<!-- /.right-side -->
	</div>
	<!-- ./wrapper -->

	<!--添加员工弹窗-->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">添加员工</h4>
				</div>
				<div class="modal-body">
					<form id="add">
						<table class="table no-border">
							<tr>
								<th style="width: 25%;">邮箱：</th>
								<td style="width: 75%; text-align: left">
									<div class="form-group">
										<input id="email2" type="text" name="email" placeholder="公司邮箱账号" />
									</div>
								</td>
							</tr>
							<tr>
								<th>初始密码：</th>
								<td style="text-align: left">随机生成,发送到邮箱</td>
							</tr>
							<tr>
								<th>姓名：</th>
								<td style="border: 0; text-align: left">
									<div class="form-group">
										<input id="name2" type="text" name="name" value="" />
									</div>
								</td>
							</tr>
							<tr>
								<th>角色：</th>
								<td  style="text-align: left">
									<div id="role2" class="form-group">
									</div>
								</td>
							</tr>
							<tr>
								<th>上级领导：</th>
								<td style="text-align: left">
									<select id="superior2" name="superior">
											<option>option 1</option>
									</select>
								</td>
							</tr>
							<tr>
								<th>备注：</th>
								<td style="text-align: left"><textarea id="memo2" name="memo"></textarea></td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer">
					<button id="close2" onclick="cleanAdd()" type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button onclick="saveUser()" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<!--编辑工弹窗-->
	<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">编辑员工</h4>
				</div>
				<div class="modal-body">
					<span id="id1" style="display: none;"></span>
					<form id="modify">
					<table class="table no-border">
						<tr>
							<th style="width: 25%;">登录账号：</th>
							<td style="width: 75%;text-align: left">
								<div class="form-group">
									<input id="email1" type="text" name="email" placeholder="公司邮箱账号" />
								</div>
							</td>
						</tr>
						<tr>
							<th>姓名：</th>
							<td style="text-align: left">
								<div class="form-group">
									<input id="name1" type="text" name="name" placeholder="" />
								</div>
							</td>
						</tr>
						
						<tr>
							<th>角色：</th>
							<td  style="text-align: left">
								<div id="role" class="form-group">
								</div>
							</td>
						</tr>
						<tr>
							<th>上级领导：</th>
							<td style="text-align: left"><select id="superior" name="superior">
							</select></td>
						</tr>
						<tr>
							<th>备注：</th>
							<td style="text-align: left"><textarea id="memo" name="memo"></textarea></td>
						</tr>
						
					</table>
					</form>
				</div>
				<div class="modal-footer">
					<button id="close1" onclick="cleanModify()" type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button onclick="modifyUser()" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>


	<style type="text/css">
.modal-dialog {
	width: 500px;
	font-size: 14px;
}

.modal-dialog input {
	border: 1px solid #ccc;
	padding: 6px;
	width: 80%;
}

.modal-dialog select {
	border: 1px solid #ccc;
	padding: 6px;
}

.modal-dialog textarea {
	width: 80%;
}

.modal-dialog table tr td:nth-child(1) {
	text-align: right;
}
</style>

	<script type="text/javascript">
		
		//删除员工
		function deleteFactory(id){
			confirm("确定要删除,删除后将无法恢复?",function(isconfirm){
				if(isconfirm){
					$.ajax({
	            		url:"../sysuser/del",
	            		data:{"userId":id},
	            		type:"post",
	            		success:function(result){
	            			if(result.head.respCode=="0000000"){
	            				success("员工删除成功",function(){
	            					window.location.href = 'list';
	            				})
	            			}else{
	            				alert(result.body);
	            			}
	            		}
	            	});
				}
			});
		}
		
		//点击编辑事件
		function enterModify(id){
			//保存当前需要编辑的员工的Id
			currentUserId = id;
			//获取当前Id用户的基本信息
			$.ajax({
				url:"../sysuser/getEdit",
				type:"get",
				data:{"userId":id},
				dataType:"json",
				success:function(result){
					if(result.head.respCode=="0000000"){
						$('#id1').html(result.body.user.id);
						$('#email1').val(result.body.user.email);
						$('#name1').val(result.body.user.name);
						var role = $('#role');
						role.empty();
						for(var i=0;i<result.body.roles.length;i++){
							var radio;
							for(var j=0;j<result.body.userRoles.length;j++){
								if(result.body.roles[i].id==result.body.userRoles[j].roleId){
									radio = $('<label for="anser" style="margin-right: 20px;"> <input checked="checked" type="checkbox" name="roles" value="'+result.body.roles[i].id+'" />'+result.body.roles[i].name+'</label>');
									break;
								}
								radio = $('<label for="anser" style="margin-right: 20px;"> <input type="checkbox" name="roles" value="'+result.body.roles[i].id+'" />'+result.body.roles[i].name+'</label>');
							}
							role.append(radio);
						}
						var superior = $('#superior');
						superior.empty();
						var option;
						option = $('<option selected="selected" value="">请选择</option>');
						superior.append(option);
						for(var i=0;i<result.body.users.length;i++){
							
							if(result.body.users[i].id==result.body.user.superior){
								option = $('<option selected="selected" value="'+result.body.users[i].id+'">'+result.body.users[i].name+'</option>');
							}
							else{
								option = $('<option value="'+result.body.users[i].id+'">'+result.body.users[i].name+'</option>');
							}
							superior.append(option);
						}
						$('#memo').val(result.body.user.memo);
						
						//adminLTE中控制checkbox和radio的样式的js
						$("input[type='checkbox']:not(.simple), input[type='radio']:not(.simple)").iCheck({
					        checkboxClass: 'icheckbox_minimal',
					        radioClass: 'iradio_minimal'
					    });
						//表单验证
						checkFormModify();
					}
				}
			});
			
		};
		
		//保存编辑员工
		function modifyUser(){
			var id = $('#id1').html();
			var formData = new FormData($('#modify')[0]);
			$.ajax({
				url:"../sysuser/save?id="+id,
				type: 'POST',  
            	data: formData,  
           		async: false,  
           		cache: false,  
            	contentType: false,  
            	processData: false,  
            	success: function (result) {
           	 		if(result.head.respCode=="0000000"){
           	 			success(result.body,function(){
           	 				window.location.href="../sysuser/list";
           	 			});
           			}
            	}
			});
		};
		//保存编辑员工
		function modifyUser(){
			$('#modify').bootstrapValidator('validate');
        	var bootstrapValidator = $("#modify").data('bootstrapValidator');
        	if(!bootstrapValidator.isValid()){
        		return;
        	}
			var id = $('#id1').html();
			var formData = new FormData($('#modify')[0]);
			$.ajax({
				url:"../sysuser/save?id="+id,
				type: 'POST',  
            	data: formData,  
           		async: false,  
           		cache: false,  
            	contentType: false,  
            	processData: false,  
            	success: function (result) {
           	 		if(result.head.respCode=="0000000"){
           	 			success(result.body,function(){
           	 				window.location.href="../sysuser/list";
           	 			});
           			}
            	}
			});
		};
		
		//清空编辑员工表单
		function cleanModify(){
			$('#modify')[0].reset();
		};
		
		//点击新增员工按钮
		$('#enterAdd').click(function(){
			//获取所有角色列表与所有员工列表
			$.ajax({
				url:"../sysuser/getSave",
				type:"get",
				dataType:"json",
				success:function(result){
					if(result.head.respCode=="0000000"){
						var role = $('#role2');
						role.empty();
						for(var i=0;i<result.body.roles.length;i++){
							var radio = $('<label for="anser" style="margin-right: 20px;"> <input type="checkbox" name="roles" value="'+result.body.roles[i].id+'" />'+result.body.roles[i].name+'</label>');
							role.append(radio);
						}
						var superior = $('#superior2');
						superior.empty();
						var option;
						option = $('<option selected="selected" value="">请选择</option>');
						superior.append(option);
						for(var i=0;i<result.body.users.length;i++){
							option = $('<option value="'+result.body.users[i].id+'">'+result.body.users[i].name+'</option>');
							superior.append(option);
						}
						
						//adminLTE中控制checkbox和radio的样式的js
						$("input[type='checkbox']:not(.simple), input[type='radio']:not(.simple)").iCheck({
					        checkboxClass: 'icheckbox_minimal',
					        radioClass: 'iradio_minimal'
					    });
						//表单验证
						checkFormAdd();
					}
				}
			});
			
		});
		
		//保存新增员工
		function saveUser(){
			$('#add').bootstrapValidator('validate');
        	var bootstrapValidator = $("#add").data('bootstrapValidator');
        	if(!bootstrapValidator.isValid()){
        		return;
        	}
			var formData = new FormData($('#add')[0]);
			$.ajax({
				url:"../sysuser/save",
				type:"post",
				data:formData,
				async: false,
           		cache: false,
            	contentType: false,
            	processData: false,
            	success: function (result) {
           	 		if(result.head.respCode=="0000000"){
           	 			success("用户创建成功，密码已发送到指定邮箱",function(){
           	 				window.location.href="../sysuser/list";
           	 			});
           			}else{
           				alert(result.body);
           			}
            	}
			});
		}
		
		//清除新增员工表单
		function cleanAdd(){
			$("#add")[0].reset();
		}
		
		
		//表单验证
        function checkFormAdd(){
        	$('#add').bootstrapValidator({
        		  fields: {
        			  //邮箱
        			  email: {
        				  trigger:'blur',
        		          validators: {
        		              notEmpty: {
        		                  message: '邮箱不能为空'
        		              },
        		              regexp: {
      	                          regexp: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/,
      	                          message: '邮箱不符规则'
      	                  	  },
      	                  	  callback:{
    	                	  	  message: '该邮箱已注册',
	      	                  	  callback:function(value, validator){
	      	                  		  if(!value){
	      	                  			  return true;
	      	                  		  }
	      	                  		  var unused=true;
	      	                  		  var data={};
	      	                  		  data.email = value;
	      	                  		  $.ajax({
			            				  url:'../sysuser/haveEmail',
			            				  type:'get',
			            				  data:data,
			            				  dataType:'json',
			            				  async:false,
			            				  success:function(result){
			            					  if(result.head.respCode=='9999990'){
			            						  if(result.body){
			            							  unused = false;
			            						  }
			            					  }
			            				  }
			            			  });
	      	                  		  return unused;
	      	                  	  }
      	                  	  }
        		          }
        		      },
        		      //姓名
        		      name: {
        		    	  trigger:'blur',
        		          validators: {
        		        	  notEmpty: {
        		        		  message: '姓名不能为空',
        		              }
        		          }
        		      },
        		      //角色
        		      roles: {
        		    	  trigger:'ifChecked ifUnchecked',
        		          validators: {
        		        	  notEmpty: {
        		        		  message: '角色不能为空',
        		              }
        		          }
        		      }
        		  }
        	});
        }
      //表单验证
        function checkFormModify(){
        	$('#modify').bootstrapValidator({
      		  fields: {
      			  //邮箱
      			  email: {
      				  trigger:'blur',
      		          validators: {
      		              notEmpty: {
      		                  message: '邮箱不能为空'
      		              },
      		              regexp: {
    	                        regexp: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/,
    	                        message: '邮箱不符规则'
    	                  },
    	                  callback:{
    	                	  	message: '该邮箱已注册',
	    	                  	callback:function(value, validator){
	  	                  		  if(!value){
	  	                  			  return true;
	  	                  		  }
	  	                  		  var unused=true;
	  	                  		  var data={};
	  	                  		  data.email = value;
	  	                  		  data.id = currentUserId;
		  	                  	  $.ajax({
			            				url:'../sysuser/haveEmail',
			            				type:'get',
			            				data:data,
			            				dataType:'json',
			            				async:false,
			            				success:function(result){
			            					if(result.head.respCode=='9999990'){
			            						if(result.body){
			            							unused =  false;
			            						}
			            					}
			            				}
			            		  });
	  	                  		  return unused;
	  	                  	  }
	      		          }
      		          }
      		      },
      		      //姓名
      		      name: {
      		    	  trigger:'blur',
      		          validators: {
      		        	  notEmpty: {
      		        		  message: '姓名不能为空',
      		              }
      		          }
      		      },
      		      //角色
      		      roles: {
      		    	  trigger:'ifChecked ifUnchecked',
      		          validators: {
      		        	  notEmpty: {
      		        		  message: '角色不能为空',
      		              }
      		          }
      		      }
      		  	}
      		});
        }
      
      $('#close1').click(function(){
    	  $('#modify').data('bootstrapValidator').destroy();

      });
      $('#close2').click(function(){
    	  $('#add').data('bootstrapValidator').destroy();
      });
	</script>

	<!-- jQuery 2.0.2 -->
	<script src="../js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="../js/bootstrap.min.js" type="text/javascript"></script>
	<!-- AdminLTE App -->
	<script src="../js/AdminLTE/app.js" type="text/javascript"></script>
	<!-- bootstrapt表单验证 -->
    <script type="text/javascript" src="../js/bootstrapValidator.min.js"></script>
</body>
</html>
